<template>
    <div class="talk">
        <button @click="get">get</button>
        <ul>
            <li v-for="(item, index) in talkList" :key="item.id">
                <div>{{ item.title }}</div>
            </li>
        </ul>
    </div>
</template>
<script setup lang="ts" name="LoveTalk">
import { reactive } from 'vue';
import axios from 'axios'; // 整体暴露
import { nanoid } from 'nanoid'; // 分别暴露,用{}

const uri = 'https://api.lovelive.tools/api/SweetNothings'

let talkList = reactive([
    { id: "1", title: "t1" },
    { id: "2", title: "t2" },
    { id: "3", title: "t3" },
])
async function get() {
    let result = await axios.get("http://localhost:5173/api/api/SweetNothings")
    const obj = { id: nanoid(), title: result.data }
    talkList.unshift(obj);
}
</script>
<style scoped>
.talk {
    background-color: orange;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0 0 10px;
}
</style>